<!-- 上新页面 -->
<template>
	<view class="content">
		<view v-for="(item, index) in imgList">
			<image :src="item.url"
				:class="[item.loaded]"
				mode="aspectFill" 
				lazy-load 
				@load="onImageLoad('imgList', index)" 
				@error="onImageError('imgList', index)"
			></image>
		</view>
	</view>
</template>

<script>
	import url from '../../components/hosturl.js';
	export default {
		components: {
			
		},
		data() {
			return {
				imgList: []
			};
		},
		
		onLoad(options){
			uni.request({
				url:url+'/Story/getStory',
				success:res=>{
					console.log(res);
					this.imgList=res.data.message;
				}
			})
		},
		methods: {
			//监听image加载完成
			onImageLoad(key, index) {
				this.$set(this[key][index], 'loaded', 'loaded');
			},
			//监听image加载失败
			onImageError(key, index) {
				this[key][index].image = '/static/errorImage.jpg';
			},
		},
	}
</script>

<style lang="scss">
	page, .content{
		background: #FFFFFF;
	}
	.content{
		margin-top: 15rpx;
		text-align: center;
	}
</style>
